﻿@using Model.Admin
@using Xproject.Util
@using Model.WXshopBuiness.Enum
@{
    string Domain = CommonHelper.GetAppSettings("Domin");
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
}

 
<link href="~/Content/css/shop/catepro/index.css" rel="stylesheet" />
<link href="~/Content/css/shop/catepro/swiper.min.css" rel="stylesheet" />
<link href="~/Content/css/shop/catepro/zy.css" rel="stylesheet" />
 
<style>
    .textover {
        width: 3.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #wrappera {
        position: absolute;
        z-index: 1;
        top: 100px;
        bottom: 0px;
        left: -9999px;
        width: 100%;
        overflow: auto;
        min-height: 600px;
    }

    #scrollera {
        position: absolute;
        z-index: 1;
        /*	-webkit-touch-callout:none;*/
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        padding: 0;
    }


    #pullDown, #pullUp {
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        font-weight: bold;
        font-size: 14px;
        color: #888;
        text-align: center;
    }

    #pullUp {
        margin-top: 30px;
    }
    .footer {
        background: #fff;
        border-top: 1px solid #ccc;
        height: 3.857em;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 24;
        width: 100%;
    }

        .footer .col-xs-3 {
            margin: 0;
            padding: 0;
        }

    .dao {
        display: block;
        color: #7b7b7b;
        text-align: center;
        text-decoration: none;
    }

        .dao span {
            display: block;
            font-size: 0.857em;
            text-align: center;
        }

        .dao i {
            display: block;
            font-size: 1.571em;
            color: #7b7b7b;
            margin-top: 2px;
            text-align: center;
        }

</style>


<!--页面内容-->
<div id="yemnr">
    <!--头部-->
    <div class="toub_beij toub_beij_zy">
        <div class="zhongj_k">
            <div class="logo_k">
                <a href="@(Domain+"/Shop/Index")">
                    <img src="~/Content/Image/logo.png" />
                </a>
            </div>
            <div class="shous_k"><span></span><input id="sos_tanc" type="search" input_key="" placeholder="搜一搜看看" placeholder_str=""></div>
            <div class="dengl">
                <div class="caid_img" id="zhu_caid"><img src="~/Content/Image/shop/cd_1.png"></div>
                <ul class="zhu_daoh" id="daoh_lb">
                    <em></em>
                    <li><a href="@(Domain+"/Shop/Index")">首页</a></li>
                    <li><a href="wangid_ShangP_FenL.html">商品分类</a></li>
                    <li><a href="~/Shop/ShopCar">购物车</a></li>

                </ul>
            </div>
        </div>
    </div>

    <!--商品列表-->
    <div class="shangp_lieb_beij">
        <div class="sp_daoh">
            <ul>
                <li class="gaodi_paix">
                    <a class="a_paix a_paix_dq">综合<em><img src="~/Content/Image/shop/a1.png"></em></a>
                    <div class="xiala">
                        <a href="#">综合</a>
                        <a href="#">高到低</a>
                        <a href="#">低到高</a>
                    </div>
                </li>
                <li><a class="a_paix" href="#">销量</a></li>
                <li><a class="a_paix" href="#">价格</a></li>
                <li class="gaodi_paix">
                    <a class="a_paix a_paix_dq a_paix_fh"><p class="syil_zk syil_zk_2"><img src="~/Content/Image/shop/lieb_tub.png"></p><em><img src="images/web/a2.png"></em></a>
                    <div class="xiala xiala1" style="z-index:2">
                        <a href="#" onclick="changeStyle('shangp_lieb_k')"><p class="syil_zk"><img src="~/Content/Image/shop/syil_zk.png"></p>缩略</a>
                        <a href="#" onclick="changeStyle('shangp_lieb_k_er')"><p class="syil_zk syil_zk_1"><img src="~/Content/Image/shop/lieb_tub.png"></p>详情</a>
                    </div>
                </li>
            </ul>
        </div>
        <div id="wrappera">
            <div id="scrollera">
                <div id="pullDown">
                    <span class="pullDownIcon"></span>
                    <span class="pullDownLabel">下拉刷新...</span>
                </div>

                <div class="browserHistory " style="margin-bottom:0px;">
                    <ul id="listUL" class="shangp_lieb_k"></ul>
                </div>
                <div id="pullUp" style="margin-top:0px">
                    <span class="pullUpIcon"></span>
                    <span class="pullUpLabel">上拉加载更多...</span>
                </div>
            </div>
        </div>
    </div>

 
</div>

<!--大框div-->
    
<!--搜索页面-->
<div id="shous_yem">
    <div class="toub_beij">
        <div class="zhongj_k zhongj_k_tanc">
            <div class="logo_k logo_k_fanh"><a id="sous_fanh_sy"><img class="fanh_ann" src="images/web/fanh.png"></a></div>
            <div class="shous_k shous_k_ganc">
                <a href="#" class="sous_ann_k"><span class="sous_ann"></span></a>
                <input type="search" placeholder="" placeholder_str="">
            </div>
        </div>
        <div class="remen_sos">
            <p>热门搜索：</p>
            <ul>
                <li><a href="#">净水器</a></li>
                <li><a href="#">空气净化器</a></li>
                <li><a href="#">滤芯</a></li>
                <li><a href="#">手办</a></li>
            </ul>
        </div>
    </div>
</div>



<script type="text/javascript">
    window.onload = function () {
        onload2();
        var TheMenu = document.getElementById('zhu_caid');
        var LieBiao = document.getElementById('daoh_lb');
        var Html = document.getElementsByTagName("html")[0];//0 第一个数组
        TheMenu.onclick = function (event) {
            if (LieBiao.style.display == 'block') {
                LieBiao.style.display = 'none';
            }
            else {
                LieBiao.style.display = 'block';
            }
            event.stopPropagation();//阻止冒泡事件
        }
        Html.onclick = function () {
            LieBiao.style.display = 'none';
        }
    };

    function onload2() {
        var Sos = document.getElementById('sos_tanc');
        var ShouYe = document.getElementById('yemnr');
        var SosYe = document.getElementById('shous_yem');
        var SosFanHui = document.getElementById('sous_fanh_sy');
        Sos.onclick = function () {
            ShouYe.style.display = ('none');
            SosYe.style.display = ('block');
        }
        SosFanHui.onclick = function () {
            ShouYe.style.display = ('block');
            SosYe.style.display = ('none');
        }
    };

    function changeStyle(css) {
        var recss = "shangp_lieb_k_er";
        if (css == "shangp_lieb_k_er") {
            recss = "shangp_lieb_k";
        }
        $("#listUL").removeClass(recss);
        $("#listUL").addClass(css);
    }

</script>
 

<script type="text/javascript">

    var myScroll,
        pullDownEl,
        pullDownOffset,
        pullUpEl,
        pullUpOffset;

    //todo 自己定义的变量
    var userDataSum,//存储数据的变量
        addNum = 0,
        stepLength = 6,//每次加载的步长
        ajaxIndex = 1,
        sumL = 0;//数据的长度
    /**
     *  刷新滚动区域的滚动条的位置（此方法在添加数据后调用）
     **/
    function refreshScrollBar() {
        console.log("刷新滚动条");
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
    }

    function pullDownAction() {
        console.log("下拉");

        setTimeout(function () {
            (function reloadPage() {
                if (GetQueryString("_rf")) {
                    window.location.href = window.location.href.replace(GetQueryString("_rf"), Math.random());
                } else {
                    window.location.href = window.location.href + (window.location.href.indexOf("?") > -1 ? "&" : "?") + "_rf=" + Math.random();
                }
            })();
            myScroll.refresh();
            console.log($("#product").height())
        }, 1000);
    }
    //初始化数据
    function pullUpAction() {
        console.log("上拉");

        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!

            getData(ajaxIndex, stepLength);
            myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
    }

    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');
        pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrappera', {
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';

                    refreshScrollBar();
                    pullDownAction();	// Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                    if (userDataSum != 0) {
                        pullUpAction();	// Execute custom function (ajax call?)

                    } else {
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = "数据已全部加载完毕！";
                    }
                }
            }
        });

        setTimeout(function () { document.getElementById('wrappera').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        return (r != null && r.length >= 2) ? decodeURI(r[2]) : null;
    }

    getData(ajaxIndex, stepLength);

    function getData(index, pagesize) {

        $.ajax({
        type: "get",
        url: "@(ViewBag.DomainUrl + "/Shop/GetCateProductList")" + "?index=" + index + "&pagesize=" + pagesize + "&cateId=@(ViewBag.cateId)",
        dataType: "json",
        success: function (data) {
        userDataSum = data.Data.length;
        var datas = "";
        if (userDataSum != 0) {
            ajaxIndex++;
        }
        for (var i = 0; i < data.Data.length; i++) {
            datas = datas + BuildDIViitem(data.Data[i]);
        }

        $("#listUL").append(datas);
    }
})
}




function BuildDIViitem(data) {

var li = '<li>' +
    /**/
    '<a href="' + '@(Domain)' + '/shop/ProductDetail?productId=' + data.ProductID + '">' +
    /**/
    '<div class="lieb_img"><img src="' + data.Domain + data.ThumbnailUrl1 + '"></div>' +
    '<div class="lieb_txt">' +
    '<p class="biao textover">' + data.ProductName + '</p>' +
    '<p class="px26">¥ ' + data.SalePriceStr + '</p>' +   
    '</div>' +
    '</a>' +
    '</li>'


return li;
}
</script>
